JavaScript Geliştirme Altyapısı: Modern Araç Zinciri Uygulaması

Günümüzün hızlı tempolu web geliştirme dünyasında, ölçeklenebilir, sürdürülebilir ve yüksek performanslı uygulamalar oluşturmak için sağlam ve iyi yapılandırılmış bir JavaScript geliştirme altyapısı hayati önem taşır. Bu kapsamlı kılavuz, modern bir JavaScript araç zincirinin temel bileşenlerini inceler ve küresel ekipler için etkili bir şekilde uygulanmasına yönelik pratik rehberlik sağlar.

Modern JavaScript Araç Zincirini Anlamak

Bir JavaScript araç zinciri, yazılım geliştirme yaşam döngüsü boyunca ilk kodlamadan dağıtıma ve bakıma kadar kullanılan araç ve süreçler bütününü kapsar. İyi tasarlanmış bir araç zinciri, tekrarlayan görevleri otomatikleştirir, kodlama standartlarını zorunlu kılar ve üretkenlik için kodu optimize ederek geliştirici verimliliğini artırır ve uygulama kalitesini iyileştirir.

Modern Bir JavaScript Araç Zincirinin Temel Bileşenleri:

• Paket Yöneticisi (npm, Yarn, pnpm): Proje bağımlılıklarını (kütüphaneler ve framework'ler) yönetir.
• Görev Çalıştırıcı/Modül Paketleyici (webpack, Parcel, Rollup): Dağıtım için JavaScript modüllerini ve varlıklarını paketler.
• Dönüştürücü (Transpiler) (Babel): Modern JavaScript (ES6+) kodunu eski tarayıcılar için geriye dönük uyumlu sürümlere dönüştürür.
• Kod Denetleyici (Linter) (ESLint): Kodlama stilini zorunlu kılar ve potansiyel hataları belirler.
• Kod Biçimlendirici (Formatter) (Prettier): Tutarlılık için kodu otomatik olarak biçimlendirir.
• Test Çatısı (Jest, Mocha, Jasmine): Otomatikleştirilmiş testler yazar ve yürütür.
• Sürekli Entegrasyon/Sürekli Dağıtım (CI/CD) (Jenkins, CircleCI, GitHub Actions): Kod değişikliklerini oluşturma, test etme ve dağıtma süreçlerini otomatikleştirir.
• Sürüm Kontrolü (Git): Kod tabanındaki değişiklikleri izler ve iş birliğini kolaylaştırır.

JavaScript Geliştirme Ortamınızı Kurma

Araç zincirine dalmadan önce, iyi yapılandırılmış bir geliştirme ortamına sahip olmak esastır. Bu şunları içerir:

1. Node.js ve npm (veya Yarn/pnpm) Kurulumu

Node.js, araç zincirimizdeki birçok aracı çalıştıran JavaScript çalışma zamanı ortamıdır. npm (Node Package Manager) varsayılan paket yöneticisidir, ancak Yarn ve pnpm performans ve bağımlılık yönetimi iyileştirmeleri sunar.

Kurulum Talimatları (Genel):

• Resmi Node.js web sitesini (nodejs.org) ziyaret edin ve işletim sisteminize (Windows, macOS, Linux) uygun yükleyiciyi indirin.
• Kurulum talimatlarını izleyin. npm genellikle Node.js ile birlikte gelir.
• Alternatif olarak, işletim sisteminize özgü bir paket yöneticisi kullanın (örneğin, macOS'ta `brew install node`).

Yarn Kurulumu:

npm install --global yarn

pnpm Kurulumu:

npm install --global pnpm

Doğrulama:

Terminalinizi açın ve çalıştırın:

node -v

npm -v

yarn -v (kuruluysa)

pnpm -v (kuruluysa)

Bu komutlar, Node.js ve seçtiğiniz paket yöneticisinin kurulu sürümlerini göstermelidir.

2. Kod Düzenleyici/IDE

Tercihlerinize uygun bir kod düzenleyici veya Entegre Geliştirme Ortamı (IDE) seçin. Popüler seçenekler şunlardır:

• Visual Studio Code (VS Code): Mükemmel JavaScript desteğine sahip, ücretsiz ve oldukça genişletilebilir bir düzenleyici.
• WebStorm: Özellikle web geliştirme için tasarlanmış güçlü bir IDE.
• Sublime Text: Geniş bir eklenti yelpazesine sahip, özelleştirilebilir bir metin düzenleyici.
• Atom: Canlı bir topluluğa sahip, başka bir ücretsiz ve açık kaynaklı düzenleyici.

JavaScript geliştirmeyi geliştirmek için seçtiğiniz düzenleyiciye ilgili eklentileri (linter'lar, formatlayıcılar ve hata ayıklama araçları gibi) yükleyin.

3. Sürüm Kontrol Sistemi (Git)

Git, kodunuzdaki değişiklikleri izlemek ve diğer geliştiricilerle iş birliği yapmak için gereklidir. Sisteminize Git'i kurun ve temel Git komutlarına (clone, add, commit, push, pull, branch, merge) aşina olun.

Kurulum Talimatları (Genel):

• Resmi Git web sitesini (git-scm.com) ziyaret edin ve işletim sisteminize uygun yükleyiciyi indirin.
• Kurulum talimatlarını izleyin.
• Alternatif olarak, işletim sisteminize özgü bir paket yöneticisi kullanın (örneğin, macOS'ta `brew install git`).

Doğrulama:

Terminalinizi açın ve çalıştırın:

git --version

Araç Zincirini Uygulama: Adım Adım

1. Proje Kurulumu ve Paket Yönetimi

Yeni bir proje dizini oluşturun ve npm, Yarn veya pnpm kullanarak bir package.json dosyası başlatın:

npm:

mkdir my-project cd my-project npm init -y

Yarn:

mkdir my-project cd my-project yarn init -y

pnpm:

mkdir my-project cd my-project pnpm init

`package.json` dosyası proje meta verilerini, bağımlılıkları ve betikleri saklar.

2. webpack ile Modül Paketleme

webpack, JavaScript modüllerinizi (ve CSS ve resimler gibi diğer varlıkları) alıp dağıtım için optimize edilmiş dosyalara paketleyen güçlü bir modül paketleyicisidir. Başlangıçta yapılandırması karmaşık olsa da, önemli performans ve optimizasyon avantajları sunar.

Kurulum:

npm install --save-dev webpack webpack-cli webpack-dev-server (veya Yarn/pnpm kullanın)

Yapılandırma (webpack.config.js):

webpack'i yapılandırmak için proje kökünüzde bir `webpack.config.js` dosyası oluşturun. Temel bir yapılandırma şöyle görünebilir:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 9000,
  },
  mode: 'development', // veya 'production'
};

Açıklama:

• `entry`: Uygulamanızın giriş noktasını belirtir (genellikle `src/index.js`).
• `output`: Çıktı dosya adını ve dizinini tanımlar.
• `devServer`: Anında yeniden yükleme (hot reloading) için bir geliştirme sunucusu yapılandırır.
• `mode`: Derleme modunu `development` veya `production` olarak ayarlar. Üretim modu, küçültme (minification) gibi optimizasyonları etkinleştirir.

webpack'i çalıştırmak için `package.json` dosyanıza betikler ekleyin:

  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development"
  }

Artık bir üretim paketi oluşturmak için `npm run build` komutunu veya geliştirme sunucusunu başlatmak için `npm run start` komutunu çalıştırabilirsiniz.

3. Babel ile Dönüştürme

Babel, modern JavaScript kodunu (ES6+) eski tarayıcılarda çalıştırılabilen geriye dönük uyumlu sürümlere dönüştürür. Bu, uygulamanızın geniş bir tarayıcı yelpazesinde çalışmasını sağlar.

Kurulum:

npm install --save-dev @babel/core @babel/cli @babel/preset-env babel-loader (veya Yarn/pnpm kullanın)

Yapılandırma (.babelrc veya babel.config.js):

Proje kökünüzde aşağıdaki yapılandırmaya sahip bir `.babelrc` dosyası oluşturun:

{
  "presets": ["@babel/preset-env"]
}

Bu, Babel'e, hedef tarayıcılarınıza göre gerekli dönüşümleri otomatik olarak belirleyen `@babel/preset-env` ön ayarını kullanmasını söyler.

webpack ile Entegrasyon:

JavaScript dosyalarını işlemek için `babel-loader` kullanmak üzere `webpack.config.js` dosyanıza bir `module` kuralı ekleyin:

module.exports = {
  // ... diğer yapılandırmalar
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

4. ESLint ile Kod Denetleme

ESLint, potansiyel hataları belirlemenize, düzeltmenize ve kodlama stili yönergelerini zorunlu kılmanıza yardımcı olur. Bu, kod kalitesini ve tutarlılığını artırır.

Kurulum:

npm install --save-dev eslint (veya Yarn/pnpm kullanın)

Yapılandırma (.eslintrc.js veya .eslintrc.json):

Proje kökünüzde bir `.eslintrc.js` dosyası oluşturun ve ESLint'i tercihlerinize göre yapılandırın. Temel bir yapılandırma şöyle görünebilir:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    // Özel kurallarınızı buraya ekleyin
  },
};

`eslint:recommended` gibi mevcut ESLint yapılandırmalarını veya Airbnb veya Google gibi popüler stil kılavuzlarını genişletebilirsiniz.

VS Code ile Entegrasyon:

Gerçek zamanlı kod denetleme geri bildirimi almak için VS Code için ESLint eklentisini yükleyin.

ESLint'i çalıştırmak için `package.json` dosyanıza bir betik ekleyin:

  "scripts": {
    "lint": "eslint ."
  }

5. Prettier ile Biçimlendirme

Prettier, projenizde tutarlı bir stil sağlamak için kodunuzu otomatik olarak biçimlendirir. Bu, kod stili hakkındaki tartışmaları ortadan kaldırır ve kodunuzu daha okunabilir hale getirir.

Kurulum:

npm install --save-dev prettier (veya Yarn/pnpm kullanın)

Yapılandırma (.prettierrc.js veya .prettierrc.json):

Proje kökünüzde bir `.prettierrc.js` dosyası oluşturun ve Prettier'ı tercihlerinize göre yapılandırın. Temel bir yapılandırma şöyle görünebilir:

module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
};

VS Code ile Entegrasyon:

Kodunuzu kaydettiğinizde otomatik olarak biçimlendirmek için VS Code için Prettier eklentisini yükleyin.

ESLint ile Entegrasyon:

ESLint ve Prettier arasındaki çakışmaları önlemek için aşağıdaki paketleri kurun:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Ardından, `prettier`'ı genişletmek ve `eslint-plugin-prettier` eklentisini kullanmak için `.eslintrc.js` dosyanızı güncelleyin:

module.exports = {
  // ... diğer yapılandırmalar
  extends: [
    'eslint:recommended',
    'prettier',
  ],
  plugins: [
    'prettier',
  ],
  rules: {
    'prettier/prettier': 'error',
  },
};

Prettier'ı çalıştırmak için `package.json` dosyanıza bir betik ekleyin:

  "scripts": {
    "format": "prettier --write ."
  }

6. Jest ile Test Etme

Jest, birim testleri, entegrasyon testleri ve uçtan uca testler yazmayı ve çalıştırmayı kolaylaştıran popüler bir JavaScript test çerçevesidir. Test, uygulamanızın kalitesini ve güvenilirliğini sağlamak için çok önemlidir.

Kurulum:

npm install --save-dev jest (veya Yarn/pnpm kullanın)

Yapılandırma (jest.config.js):

Jest'i yapılandırmak için proje kökünüzde bir `jest.config.js` dosyası oluşturun. Temel bir yapılandırma şöyle görünebilir:

module.exports = {
  testEnvironment: 'node',
};

Test Yazma:

`.test.js` veya `.spec.js` uzantılı test dosyaları oluşturun. Örneğin, `src/math.js` adında bir dosyanız varsa, `src/math.test.js` adında bir test dosyası oluşturabilirsiniz.

Örnek Test:

// src/math.test.js
const { add } = require('./math');

describe('math functions', () => {
  it('should add two numbers correctly', () => {
    expect(add(2, 3)).toBe(5);
  });
});

Jest'i çalıştırmak için `package.json` dosyanıza bir betik ekleyin:

  "scripts": {
    "test": "jest"
  }

7. Sürekli Entegrasyon/Sürekli Dağıtım (CI/CD)

CI/CD, kod değişikliklerinizi oluşturma, test etme ve dağıtma sürecini otomatikleştirir. Bu, uygulamanızın her zaman dağıtılabilir bir durumda olmasını ve yeni özelliklerin ve hata düzeltmelerinin hızlı ve güvenilir bir şekilde yayınlanabilmesini sağlar. Popüler CI/CD platformları arasında Jenkins, CircleCI, Travis CI ve GitHub Actions bulunur.

Örnek: GitHub Actions

Deponuzun `.github/workflows` dizininde bir iş akışı dosyası oluşturun (örneğin, `.github/workflows/ci.yml`).

name: CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js 16
      uses: actions/setup-node@v2
      with:
        node-version: '16.x'
    - name: Install dependencies
      run: npm install
    - name: Lint
      run: npm run lint
    - name: Test
      run: npm run test
    - name: Build
      run: npm run build

Bu iş akışı, `main` dalına yapılan her push'ta ve `main` dalını hedefleyen her pull request'te otomatik olarak çalışacaktır. Bağımlılıkları kuracak, kod denetlemesini çalıştıracak, testleri çalıştıracak ve uygulamanızı oluşturacaktır.

JavaScript Geliştirme İş Akışınızı Optimize Etme

1. Kod Gözden Geçirme

Kod kalitesini ve bilgi paylaşımını sağlamak için bir kod gözden geçirme süreci oluşturun. GitHub pull request'leri gibi araçlar, kod değişikliklerini gözden geçirmeyi ve geri bildirim sağlamayı kolaylaştırır.

2. Otomasyon

Manuel çabayı azaltmak ve tutarlılığı artırmak için mümkün olduğunca çok görevi otomatikleştirin. Tekrarlayan görevleri otomatikleştirmek için npm betikleri, Makefile'lar veya görev çalıştırıcılar gibi araçları kullanın.

3. Performans İzleme

Performans darboğazlarını belirlemek ve düzeltmek için uygulamanızın üretimdeki performansını izleyin. Sayfa yükleme süresi, hata oranı ve kaynak kullanımı gibi metrikleri izlemek için Google Analytics, New Relic veya Sentry gibi araçları kullanın.

4. Dokümantasyon

Diğer geliştiricilerin projenizi anlamasını ve katkıda bulunmasını kolaylaştırmak için kodunuzu ve geliştirme sürecinizi belgeleyin. Kodunuzdan dokümantasyon oluşturmak için JSDoc veya Sphinx gibi araçları kullanın.

5. Sürekli Öğrenme

JavaScript ekosistemi sürekli gelişmektedir, bu nedenle en son trendler ve en iyi uygulamalarla güncel kalmak önemlidir. Blogları okuyun, konferanslara katılın ve yeni araçlar ve tekniklerle denemeler yapın.

Küresel Ekipler İçin Dikkat Edilmesi Gerekenler

Küresel ekiplerle çalışırken, akılda tutulması gereken birkaç ek husus vardır:

• İletişim: Açık iletişim kanalları ve yönergeleri oluşturun. Etkili iletişim kurmak için Slack, Microsoft Teams veya e-posta gibi araçları kullanın. Zaman dilimi farklılıklarına dikkat edin ve toplantıları buna göre planlayın.
• İş birliği: Kod değişikliklerini yönetmek ve iş birliğini kolaylaştırmak için Git, GitHub veya GitLab gibi iş birliği araçlarını kullanın. Herkesin gerekli araçlara ve kaynaklara erişimi olduğundan emin olun.
• Kültürel Farklılıklar: Kültürel farklılıkların farkında olun ve iletişim tarzınızı buna göre ayarlayın. Diğer kültürler hakkında varsayımlarda bulunmaktan kaçının.
• Dil Engelleri: Gerekirse dil desteği sağlayın. İletişimi kolaylaştırmak için çeviri araçlarını kullanmayı düşünün.
• Erişilebilirlik: Uygulamanızın engelli kullanıcılar için erişilebilir olduğundan emin olun. WCAG gibi erişilebilirlik yönergelerini izleyin.

Farklı Proje Türleri İçin Örnek Araç Zinciri Yapılandırmaları

1. Basit Statik Web Sitesi

• Paket Yöneticisi: npm veya Yarn
• Paketleyici: Parcel (basit ve sıfır yapılandırmalı)
• Denetleyici/Biçimlendirici: ESLint ve Prettier

2. React Uygulaması

• Paket Yöneticisi: npm veya Yarn
• Paketleyici: webpack veya Parcel
• Dönüştürücü: Babel (`@babel/preset-react` ile)
• Denetleyici/Biçimlendirici: ESLint ve Prettier
• Test: Jest veya Mocha (Enzyme ile)

3. Node.js Arka Uç Uygulaması

• Paket Yöneticisi: npm veya Yarn
• Paketleyici: Rollup (kütüphaneler için) veya webpack (uygulamalar için)
• Dönüştürücü: Babel
• Denetleyici/Biçimlendirici: ESLint ve Prettier
• Test: Jest veya Mocha (Supertest ile)

Sonuç

Modern bir JavaScript geliştirme altyapısı uygulamak karmaşık ama ödüllendirici bir süreçtir. Doğru araçları dikkatlice seçerek ve etkili bir şekilde yapılandırarak geliştirici verimliliğini, kod kalitesini ve uygulama performansını önemli ölçüde artırabilirsiniz. Araç zincirinizi projenizin ve ekibinizin özel ihtiyaçlarına göre uyarlamayı ve iş akışınızı sürekli olarak değerlendirip iyileştirmeyi unutmayın.

Bu kılavuz, sağlam bir JavaScript geliştirme altyapısı oluşturmak için sağlam bir temel sağlar. Sizin ve ekibiniz için en iyi olanı bulmak için farklı araçlar ve tekniklerle denemeler yapın. İyi şanslar!